<template slot-scope="scope">
  <div class="pic">
    <div class="picCon">
      <img src="../../assets/img/pic1.png">
    </div>
    <div class="moban"></div>
    <div class="introCon">
      <p class="intro">夏天系列的修身连体系泳衣库装夏天系列的修身连体系泳衣库衣库装装</p>
      <div class="pri">
        <span class="price">￥<span id="money">229.00</span></span>
        <span class="num">原价￥<span>300.0起</span></span>
      </div>
      <div class="tag">
        <span>拼团</span>
        <span>特惠</span>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'pic',
    data() {
      return {}
    },
    methods: {
// changeMask() {
//   // console.log(1111)
//   const vm = this
//   const mask = vm.$refs['mask']
//   // console.log(mask)
//   mask.style.display = 'block'
// },
// deleteMask() {
//   const vm = this
//   const mask = vm.$refs['mask']
//   // console.log(mask)
//   mask.style.display = 'none'
// }
    }
  }
</script>

<style scoped>
  .pic {
    width: 260px;
    height: 426px;
    border: 1px solid #f2f2f2;
    position: relative;
  }

  .picCon {
    overflow: hidden;
    width: 260px;
    height: 280px !important;
  }

  .pic img {
    width: 100%;
  }

  .pic img {
    cursor: pointer;
    transition: all 0.6s;
    width: 260px;
    height: 280px;
  }

  .pic:hover .moban {
    display: block;
  }

  /*.pic img:hover{*/
  /*transform: scale(1.2);*/
  /*background: rgba(0,0,0,0.3);*/
  /*}*/
  /*img:hover .moban{*/
  /**/
  /*}*/
  /*.trans{*/
  /*transform: scale(1.2);*/
  /*}*/
  .introCon {
    padding: 20px;
    position: absolute;
    top: 280px;
  }

  .moban {
    position: relative;
    top: -280px;
    left: 0;
    background: rgba(222, 228, 248, 0.6);
    width: 260px;
    height: 426px;
    display: none;
  }

  .intro {
    overflow: hidden;
    line-height: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 16px;
    color: #464646;
    height: 38px;
  }

  .pri {
    margin-top: 14px;
    font-size: 14px;
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 24px;
  }

  .price {
    color: #a5a8b1;
    font-size: 14px;
    margin-right: 10px;
  }

  .num {
    color: #a6a9b2;
    font-size: 12px;

  }

  .num > span {
    text-decoration: line-through;
    margin-left: 3px;
  }

  #money {
    font-size: 18px;
    color: #fbc702;
    font-family: "Arial";
    margin-left: 10px;
  }

  .tag {
    margin-top: 2px;
  }

  .tag > span {
    font-size: 12px;
    color: #3a435f;
    border-radius: 4px;
    border: 1px solid #3a435f;
    padding: 2px;
  }
</style>
